<template>
  <div class="user_main">
    <div class="user_row">
      <div class="row_left">
        <div class="left_img_row">
          <div class="img_row">
            <img src="../../../static/images/head_pic.png" alt="" />
          </div>
          <div>admin</div>
        </div>
        <div class="nav_list">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            @select="handleOpen"
          >
            <el-menu-item :index="1">
              <i class="el-icon-user"></i>
              <span slot="title">个人资料</span>
            </el-menu-item>
            <el-menu-item :index="2">
              <i class="el-icon-goods"></i>
              <span slot="title">修改密码</span>
            </el-menu-item>
            <el-menu-item :index="3">
              <i class="el-icon-s-tools"></i>
              <span slot="title">搭建资料</span>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
      <div class="row_right">
        <user v-if="activeIndex ==1"></user>
        <userdata v-else-if="activeIndex ==2"></userdata>
        <newdata v-else-if="activeIndex ==3"></newdata>
      </div>
    </div>
  </div>
</template>
<script>
import user from '../../components/user/index.vue'
import  userdata from '../../components/user/userdata'
import newdata from '../../components/user/newdata'
export default {
  components:{
    user,
    userdata,
    newdata
  },
  data() {
    return {
      activeIndex:1,
    };
  },
  methods: {
    handleOpen(key) {
      this.activeIndex = key
    },
  },
};
</script>
<style scoped>
.user_main {
  background-color: #f8f8f8;
  padding: 100px;
}
.user_row {
  display: flex;
  justify-content: center;
}
.row_left {
  width: 300px;
  height: 400px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.row_right {
  width: 800px;
  min-height: 400px;
  background-color: #fff;
  margin-left: 30px;
}
.left_img_row {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.nav_list {
  flex: 1;
  width: 100%;
}
.img_row > img {
  width: 100px;
  object-fit: contain;
  border-radius: 50%;
}
.el-menu {
  border: none !important;
}
.el-menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>